<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详细</title>
    <link rel="stylesheet" href="css/public/reset.css">
    <link rel="stylesheet" href="css/bootstrap.3.3.7.min.css">
    <link rel="stylesheet" href="css/public/header.css">
    <link rel="stylesheet" href="css/public/public.css">
    <link rel="stylesheet" href="css/modelSelection/modelSelection.css">
    <link rel="stylesheet" href="css/details/details.css">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img src="images/public/logo.png" height="92" width="200"/>
        </a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li><a href="01.html">产品目录</a></li>
          <li><a href="02.html">选型</a></li>
          <li><a href="03.html">详细</a></li>
          <li><a href="04.html">输出</a></li>
          <li><a href="#">帮助</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              语言
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">中文</a></li>
              <li><a href="#">English</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
    <div class="my-container">
      <h2>选机清单</h2>
      <div class="btn-box btn-box-qq btn-right margin0">
        <button type="button" class="btn btn-primary margin0">编辑</button>
        <button type="button" class="btn btn-primary back margin0">删除</button>
      </div>
      <div class="a-table">
        <div class="table-head">
          <table class="table">
            <tr>
              <td>
                型号
                <span class="marginBottom model"></span>
                MODEL
              </td>
              <td>电压<span class="marginBottom"></span>UAC</td>
              <td>频率<span class="marginBottom"></span>F</td>
              <td>电容器<span class="marginBottom"></span>C</td>
              <td>曲线<span class="marginBottom"></span>CURVE</td>
              <td>输入功率<span class="marginBottom"></span>MODEL</td>
              <td>转速<span class="marginBottom"></span>N</td>
              <td>电流<span class="marginBottom"></span>I</td>
              <td>静压<span class="marginBottom"></span>PSF</td>
              <td>环境温度<span class="marginBottom"></span>Temp</td>
              <td>静压效率<span class="marginBottom"></span>EEF.Grade</td>
              <td>能效值<span class="marginBottom"></span>MODEL</td>
              <td>噪声<span class="marginBottom"></span>Noise</td>
              <td>备注<span class="marginBottom"></span>p1</td>
            </tr>
            <tr class="head-sub-title">
              <td class="model"></td>
              <td>V</td>
              <td>HZ</td>
              <td>UF/450V</td>
              <td>NO.</td>
              <td>W</td>
              <td>r/min</td>
              <td>A</td>
              <td>PA</td>
              <td>C</td>
              <td>%</td>
              <td>N</td>
              <td>DB</td>
              <td></td>
            </tr>
          </table>
        </div>
        <div class="table-body">
          <div class="table-body-auto">
            <table class="table">
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
              <tr>
                <td class="model">YSWF12</td>
                <td>3~380</td>
                <td>50</td>
                <td>--</td>
                <td>A</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>1477</td>
                <td>888</td>
                <td>888</td>
                <td>888</td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <!--菜单状态图-->
      <div class="tab-curve-box">
        <div class="btn-group btn-group-lg">
          <div class="btn-tab activeB">Button 1</div>
          <div class="btn-tab">Button 2</div>
          <div class="btn-tab">Button 3</div>
          <div class="btn-tab">Button 4</div>
        </div>
        <ul>
          <li>
            <div class="status-box" id="main" style="width: 100%;height:100%;">8888</div>
          </li>
          <li>
            <div class="status-box" id="main2" style="width: 100%;height:100%;">8888</div>
          </li>
          <li>
            <div class="status-box" id="main3" style="width: 100%;height:100%;">8888</div>
          </li>
          <li>
            <div class="status-box" id="main4" style="width: 100%;height:100%;">8888</div>
          </li>
        </ul>
      </div>
    </div>
  <!--按钮-->
  <div class="btn-box btn-box-qq">
    <button type="button" class="btn btn-primary back">返回</button>
    <button type="button" class="btn btn-primary">下一步</button>
  </div>
</div>
<img class="bg-img" src="images/public/max-bg-03.png">
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    let vm = new Vue({
    el: '#app',
    methods:{

        }
    })
    $('.nav>li>a').click(function () {
        $(this).css('color','#fff')
    })

    // 基于准备好的dom，初始化echarts实例 status-box
    var myChart = echarts.init(document.getElementById('main'));
    //var myChart = echarts.init($('status-box'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    var myChart2 = echarts.init(document.getElementById('main2'));
    // 指定图表的配置项和数据
    var option2 = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('main3'));
    // 指定图表的配置项和数据
    var option3 = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('main4'));
    // 指定图表的配置项和数据
    var option4 = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option4);

$(function(){
  $(".btn-tab").click(function(){
    $(".btn-tab").eq($(this).index()).addClass("activeB").siblings().removeClass("activeB");
  })
})


</script>

</body>
</html>
